<template>
  <div class="ArticleList">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
        offset="50"
      >
        <!-- 不加冒号是字符串,加了冒号是表达式 -->
        <Allarticle
          v-for="item in artileList"
          :key="item.art_id"
          :item="item"
          @dislikearticle="dislikearticle"
          @reportArticle="reportFn"
          @click.native="JumpArticle(item.art_id)"
        ></Allarticle>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import Allarticle from "./components/ArticleItem.vue";
import { getAllArticles, dislikeArticle, reportsAtricle } from "@/api/home";
import { Notify } from "vant";

export default {
  name: "ArticleList",
  data() {
    return {
      artileList: [],
      isLoading: false,
      loading: false,
      finished: false,
      timeStrap: new Date().getTime(),
    };
  },
  props: {
    channelId: Number,
  },
  components: {
    Allarticle,
  },
  created() {
    // console.log(this.channelId);
    this.getChannel();
  },
  methods: {
    JumpArticle(art_id) {
      this.$router.push({ path: `/article/?art_id=${art_id}` });
    },
    async getChannel() {
      // console.log(this.channelId);
      // console.log(this.timeStrap);
      let resp = await getAllArticles(this.channelId, this.timeStrap);
      console.log(resp);
      this.artileList = resp.data.data.results;
      this.timeStrap = resp.data.data.pre_timestamp;
    },

    //onload
    async onLoad() {
      console.log("ready onload");
      if (this.artileList.length === 0) {
        console.log("data ==0");
        return;
      }
      let resp = await getAllArticles(this.channelId, this.timeStrap);
      if (
        resp.data.data.results.length === 0 ||
        resp.data.data.pre_timestamp == null
      ) {
        this.finished = true;
        console.log("no more data");
        return;
      }
      console.log(resp.data.data.results);
      this.timeStrap = resp.data.data.pre_timestamp;
      this.artileList = [...this.artileList, ...resp.data.data.results];
      this.loading = false;
    },

    //onRefresh
    onRefresh() {
      this.artileList = [];
      this.getChannel();
      this.isLoading = false;
    },

    //对文章不感兴趣
    async dislikearticle(id) {
      try {
        const res = await dislikeArticle(id);
        console.log(res);
        Notify({ type: "success", message: "反馈成功" });
      } catch (error) {
        // Notify({ type: "success", message: "反馈失败" });

        console.log(error);
      } finally {
      }
    },
    // 举报文章
    async reportFn(id, type) {
      try {
        const res = await reportsAtricle(id, type);
        console.log(res);
        Notify({ type: "success", message: "举报成功" });
      } catch (error) {
        Notify({ type: "warning", message: "举报失败" });

        console.log(error);
      } finally {
      }
    },
  },
};
</script>

<style scoped></style>
